<template>
	<div class="specialty">
		<div class="add-btn" v-if="editState == 0" @click="editState = 1"><img src="@/assets/me/up.png"><span>添加</span></div>
		<div class="title">特长标签</div>
		<div class="specialty-content" v-if="editState == 0 && selected.length>0">
			<div class="specialty-item" v-for="(items,index) in selected" :key="index">
				{{items}} 
			</div>
		</div>
		<div class="specialty-content no-data" v-if="editState == 0 && selected.length==0">
			是金子总会发光的，快主动秀出你的闪光点！
		</div>
		<div class="specialty-edit" v-if="editState == 1">
			<div class="content">
				<div class="specialty-item" 
					:class="selected.indexOf(items.name)!=-1?'is-active':''" 
					v-for="(items,index) in allSpecoalty" :key="index" @click="selectItem(items.name)">
					{{items.name}}
				</div>
			</div>
			<el-form ref="form" :model="addTag" :rules="rules" label-width="10px" label-position="left" hide-required-asterisk class="el-form-box">
				<div class="edit-item flex">
					<el-form-item class="flex-item" prop="specialtyTag">
						<el-input v-model="addTag.specialtyTag" placeholder="请输入特长，不超过8个汉字" maxlength="8"></el-input>
					</el-form-item>
					<div class="add-specialty" @click="addTags">添加</div>
				</div>
			</el-form>
			<div class="form-option">
				<div class="save qida-success-btn" @click="saveEdit">保存</div>
				<div class="cancel qida-cancel-btn" @click="cancelEdit">取消</div>
				<span class="tips">添加你掌握的特长，最多可添加6种特长</span>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeSpecialtyTags,addResumeSpecialtyTags} from '@/api/me/resume'
import {findBaseData} from '@/api/base'
	export default {
		name:'specialty',
		props:['resumeSpecialtyTags'],
		data: function() {
			return {
				editState:0, //0:显示，1：编辑

				//提交专用
				form:{
					id: this.$route.query.id,
					specialtyTags:[]
				},

				//添加
				addTag:{
					specialtyTags:''
				},

				rules: {
					specialtyTag: [{ required: true, trigger: "blur", message: "请输入特长名称" }]
				},

				//选择的数据
				selected:[],
				//基础数据
				allSpecoalty:[],
			}
		},
		watch:{
			resumeSpecialtyTags(val){
				if(val.length>0){
					let arr = val[0].specialtyTags.split(",");
					for (let i = 0; i < arr.length; i++) {
						let element = arr[i];
						this.selected.push(element)

						if(JSON.stringify(this.allSpecoalty).indexOf(element) == -1){

							let addTag = {
								children: null,
								code: null,
								id: null,
								name: element,
								parentCode: null,
							}

							this.allSpecoalty.push(addTag)
						}
					}
				}
			}
		},
		created() {
			this.getAllSpecoalty();
		},
		methods: {
			//添加其他标签
			addTags(){
				this.$refs.form.validate(valid => {
					if (valid) {
						let addTag = {
							children: null,
							code: null,
							id: null,
							name: this.addTag.specialtyTag,
							parentCode: null,
						}
						this.allSpecoalty.push(addTag)
						this.addTag.specialtyTag = '';
					}
				})
			},

			//获取基本标签
			getAllSpecoalty(){
				const data={ data:'speciality' }
				findBaseData(data).then(res => {
					this.allSpecoalty = res.datas[0].children;
				}).catch(err => {
					this.$message.error(err);
				})
			},

			//选择
			selectItem(val){
				if(this.selected.indexOf(val) != -1){
					this.selected.splice(this.selected.indexOf(val) , 1)
				}else{

					if(this.selected.length > 5){
						return this.msgInfo("最多可添加6种特长");
					}

					this.selected.push(val)
				}
			},
			//取消
			cancelEdit(){
				this.editState=0;
			},
			//保存
			saveEdit(){
				let arr = this.selected.toString().trim();
				let data={
					id: this.$route.query.id,
					specialtyTags: arr
				}
				updateResumeSpecialtyTags(data).then(res => {
					this.$message.success('保存成功');
					this.editState=0;
				}).catch(err => {
					this.$message.error(err);
				})
			}
		}
	}
</script>
<style lang="scss">
	.specialty{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.specialty-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.specialty-content{
			margin-top: 25px;
			color: #787878;
			line-height: 30px;
			overflow: hidden;
			padding-left: 10px;
			.specialty-item{
				padding: 0 20px;
				float: left;
				margin-right: 20px;
				margin-bottom: 20px;
				border: 1px solid #DEDEDE;
				border-radius: 2px;
			}
		}
		.specialty-edit{
			.content{
				margin-top: 25px;
				color: #787878;
				line-height: 30px;
				overflow: hidden;
				padding-left: 10px;
				.specialty-item{
					padding: 0 20px;
					float: left;
					margin-right: 20px;
					margin-bottom: 20px;
					border: 1px solid #DEDEDE;
					border-radius: 2px;
					cursor: pointer;
				}
				.specialty-item.is-active{
					border:1px solid #3EABC4;
					color: #3EABC4;
				}
			}
			.el-form-box{
				width: 390px;
				margin-top: 20px;
				.el-input__inner{
					border-radius: 0px;
				}
				.el-input{
					width: 100%;
				}
				.add-specialty{
					width: 60px;
					height: 36px;
					line-height: 36px;
					cursor: pointer;
					background: #3DABC4;
					color: #fff;
					text-align: center;
				}
			}
			.form-option{
				margin-top: 10px;
				padding-left: 10px;
				.save{
					margin-right: 15px;
				}
				.tips{
					font-weight: 400;
					color: #BBBBBB;
					line-height: 36px;
					margin-left: 20px;
				}
				
			}
		}
	}
</style>
